<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>发布文章 - 回声网络</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        body {
            margin: 0;
            padding: 0;
            background: #f5f5f5;
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        }
        .container {
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
        }
        .header {
            background: #409EFF;
            color: white;
            padding: 0 20px;
            line-height: 60px;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="header">
        <span style="font-size: 20px; font-weight: bold;">回声网络 - 发布文章</span>
        <div style="float: right;">
            <el-button type="text" style="color: white;" @click="goHome">首页</el-button>
            <el-button type="text" style="color: white;" @click="goArticleList">文章列表</el-button>
        </div>
    </div>

    <div class="container">
        <el-card>
            <div slot="header">
                <span style="font-size: 18px; font-weight: bold;">发布新文章</span>
            </div>

            <el-form :model="form" :rules="rules" ref="form">
                <el-form-item label="文章标题" prop="title">
                    <el-input
                            v-model="form.title"
                            placeholder="请输入文章标题"
                            style="width: 100%">
                    </el-input>
                </el-form-item>

                <!-- 添加分类选择 -->
                <el-form-item label="文章分类">
                    <el-select
                            v-model="form.categories"
                            multiple
                            placeholder="请选择分类"
                            style="width: 100%;"
                            :loading="categoriesLoading">
                        <el-option
                                v-for="category in categories"
                                :key="category.id"
                                :label="category.name"
                                :value="category.id">
                        </el-option>
                    </el-select>
                    <div style="font-size: 12px; color: #666; margin-top: 5px;">
                        可多选，按住Ctrl键选择多个分类
                    </div>
                </el-form-item>

                <el-form-item label="文章内容" prop="content">
                    <el-input
                            type="textarea"
                            v-model="form.content"
                            placeholder="支持 Markdown 语法"
                            :rows="15"
                            style="width: 100%">
                    </el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="submitForm" :loading="loading">
                        {{ loading ? '发布中...' : '发布文章' }}
                    </el-button>
                    <el-button @click="goArticleList">取消</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</div>

<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            loading: false,
            categoriesLoading: false,
            categories: [], // 分类数据
            form: {
                title: '',
                content: '',
                categories: [] // 选择的分类ID数组
            },
            rules: {
                title: [
                    { required: true, message: '请输入文章标题', trigger: 'blur' },
                    { min: 2, max: 100, message: '标题长度在 2 到 100 个字符', trigger: 'blur' }
                ],
                content: [
                    { required: true, message: '请输入文章内容', trigger: 'blur' },
                    { min: 10, message: '内容至少10个字符', trigger: 'blur' }
                ]
            }
        },
        mounted() {
            this.loadCategories();
        },
        methods: {
            // 加载分类数据
            loadCategories() {
                this.categoriesLoading = true;
                fetch('categories')
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('加载分类失败');
                        }
                        return response.json();
                    })
                    .then(data => {
                        this.categories = data;
                    })
                    .catch(error => {
                        console.error('加载分类失败:', error);
                        this.$message.error('加载分类失败，请刷新页面重试');
                    })
                    .finally(() => {
                        this.categoriesLoading = false;
                    });
            },

            submitForm() {
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        this.loading = true;

                        // 传统表单提交
                        const form = document.createElement('form');
                        form.method = 'POST';
                        form.action = 'publish';
                        form.style.display = 'none';

                        // 添加标题和内容字段
                        ['title', 'content'].forEach(field => {
                            const input = document.createElement('input');
                            input.name = field;
                            input.value = this.form[field];
                            form.appendChild(input);
                        });

                        // 添加分类字段（多选）
                        this.form.categories.forEach(categoryId => {
                            const input = document.createElement('input');
                            input.name = 'categories';
                            input.value = categoryId;
                            form.appendChild(input);
                        });

                        document.body.appendChild(form);
                        form.submit();

                    } else {
                        this.$message.error('请填写完整信息');
                    }
                });
            },
            goHome() {
                window.location.href = 'index.jsp';
            },
            goArticleList() {
                window.location.href = 'articleList';
            }
        }
    });
</script>
</body>
</html>